<template>
	<view class="container" :style="{height: `${screenHeight}rpx`}">
		<view class="title">
			<text></text>
			<text>快捷栏</text>
			<up-icon name="close" @click="closeBar"></up-icon>
		</view>
		<view class="content">
			<scroll-view scroll-y="true" style="height: 39%;">
				<view style="padding: 15px;">
					<view style="margin-bottom: 20rpx;display: flex;justify-content: space-between">
						<text>展示于快捷栏的应用</text>
						<text style="color: #909399;">点击进入应用</text>
					</view>
					<view style="display: flex;flex-wrap: wrap;margin-bottom: 20rpx;">
						<view style="width: 25%;height: 150rpx;display: flex;flex-direction: column; justify-content: center;align-items: center; background-color: #fff;border-radius: 10rpx;margin-right: 15rpx;">
							<image style="width: 40rpx;height: 40rpx;" src="@/static/icon/gzqBlue.svg"></image>
							<text>会审中心</text>
						</view>
						<!-- <view style="width: 25%;height: 150rpx;display: flex;flex-direction: column; justify-content: center;align-items: center; background-color: #fff;border-radius: 10rpx;margin-right: 15rpx;">
							<image style="width: 40rpx;height: 40rpx;" src="@/static/icon/gzqBlue.svg"></image>
							<text>水印相机</text>
						</view> -->
					</view>
					<view style="margin-bottom: 20rpx;display: flex;justify-content: space-between">
						<text>未展示的应用</text>
					</view>
					<view style="border-radius: 10rpx;background-color: #fff;height: 100vh;padding: 15px;">
						<u-cell isLink="true" v-for="item in tableData">
							<template #icon>
								<view>
									<image :src="item.staticImg" style="width: 40rpx;height: 40rpx;"></image>
								</view>
							</template>
							<template #title>
								<view>{{ item.name }}</view>
								<view><text style="font-size: 22rpx;color: #909399;">{{ item.description }}</text></view>
							</template>
						</u-cell>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { chatApi } from '@/apis/cloud/chat'
	import { useChatStore, useGroupStore, useSocketStore, useUserStore } from '@/pinia-store/user'
	import { getTimeStringAutoShort, objectToFormData } from "@/utils/chat"
	export default {
		name: 'ShorcutBarIndex',
		data () {
			return {
				screenHeight:0,
				tableData: []
			}
		},
		created(){
			let app = uni.getSystemInfoSync();	
			this.screenHeight = app.screenHeight;
			
			this.getList();
		},
		methods:{
			closeBar() {
				//this.$parent.$parent.closeBar();
			},
			async getList() {
				const params = {
					data: {
						page:1,
						pageSize:100,
					},
					url: 'index.php/users/ShortcutBar/getList'
				}
				
				const msg = await chatApi(null, objectToFormData(params));
				if(msg.code == 200) {
					msg.data.data.forEach(item=>{
						if(item.id > 2){
							item.staticImg = "/static/chat/shortcutbar/"+item.icon+".png";
							this.tableData.push(item);
						}
					});
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		height: 100%;
		.title {
			flex: 0 0 auto;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 10px 15px;
		}
		.content {
			background-color: #f2f2f6;
			flex: 1 1 auto;
			font-size: 26rpx;
		}
	}
</style>